<lv-group lvGutter="16px">
  <button
    #popover="lvPopover"
    lv-popover
    lvPopoverHeader="Title"
    [lvPopoverContent]="contentTemplate"
    [lvPopoverFooter]="footerTemplate"
    lvPopoverTheme="light"
    lvPopoverTrigger="click"
    [lvPopoverOuterClosable]="false"
    lv-button
  >
    Click me(Call internal method)
  </button>

  <button
    lv-popover
    lvPopoverHeader="Title"
    [lvPopoverContent]="contentTemplate"
    [lvPopoverFooter]="visibleTemplate"
    lvPopoverTheme="light"
    lvPopoverTrigger="customize"
    [lvPopoverOuterClosable]="false"
    [(lvPopoverVisible)]="visible"
    (click)="open()"
    lv-button
  >
    Click me(Change visible)
  </button>
</lv-group>

<ng-template #contentTemplate>
  <div style="margin:16px 0;">
    <p>This is content ...</p>
  </div>
</ng-template>
<ng-template #footerTemplate>
  <div style="text-align:center">
    <button lv-button (click)="close()">Close</button>
  </div>
</ng-template>
<ng-template #visibleTemplate>
  <div style="text-align:center">
    <button lv-button (click)="changeVisible()">Close</button>
  </div>
</ng-template>
